<template>
  <div class="flex-row auto" >
    <validator name='m' @valid="mValid(true)"  @invalid="mValid(false)">
      <div class="thumbnail" >
        <avatar-upload :img-src.sync="row.img.content" :filename.sync="row.img.filename"></avatar-upload>
      </div>
      <form class="form-horizontal user-meter-padding" style="flex: 1;">
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4" :class="[$m.meternumber.required ? 'has-error' : '']">
            <!-- v-validate:f_meternumber='{required: true }'  -->
            <label for="f_meternumber" class="control-label">表号</label>
            <!-- <div class="col-sm-3" :class="[(row.f_meternumber && row.f_meternumber.length > 0 ? true : false )? '' : 'has-error']">
              <input type="text" class="form-control" v-model="row.f_meternumber" placeholder='表号' v-next-el="{id: $index+'metertitles'}"
              @input="$dispatch('self-validator')">
            </div> -->
            <div class="col-sm-3">
              <input type="text" class="form-control" v-model="row.f_meternumber" v-validate:meternumber='{required: true }'  placeholder='表号' v-next-el="{id: 'metertitles'}">
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_metertitles" class="control-label">表封号</label>
            <div class="col-sm-3">
              <input type="text" class="form-control" v-model="row.f_metertitles" placeholder='表封号' v-next-el="{id: 'meterbase'}"   id="metertitles">
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_barcode" class="control-label">条码号</label>
            <div class="col-sm-3">
              <input type="number" class="form-control" v-model="row.f_barcode" placeholder='条码号'  id="meterbase">
            </div>
          </div>
        </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4">
            <label for="f_meter_base" class="control-label">表底数</label>
            <div class="col-sm-3 form-input-group">
              <input type="number" class="form-control" v-model="row.f_meter_base" placeholder='表底数'  id="meterbase" @blur="tablebaseChange()" :disabled="f_userinfo_id">
              <button type="button" name="button" class="btn btn-link" @click="modefiy('f_meter_base')" v-if="f_userinfo_id">修改</button>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4" :class="[$m.brand.required ? 'select-error' : '']">
            <label for="gasbrand" class=" col-sm-2 control-label">气表品牌</label>
            <div class="col-sm-2">
              <input type="text" v-show="false" v-model="$refs.brand.selectedItems" v-validate:brand='{required: true }'>
              <v-select :value.sync="row.gasbrand" :options='meterbrands' placeholder='气表品牌' close-on-select
                        @change='brandChange' v-model='row.gasbrand' v-ref:brand></v-select>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4" :class="[$m.model.required ? 'select-error' : '']">
            <label for="gasmodel" class="col-sm-2 control-label">气表型号</label>
            <div class="col-sm-2">
              <input type="text" v-show="false" v-model="$refs.model.selectedItems"  v-validate:model='{required: true }'>
              <v-select :value.sync="row.gasmodel" :options='row.gasbrand[0].gasmodel' placeholder='气表型号' close-on-select
                        v-model='row.gasmodel' :disabled= 'row.gasbrand.length === 0 ' v-ref:model></v-select>
            </div>
          </div>
        </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4">
            <label for="gasmodel" class=" col-sm-1 control-label">左右表</label>
            <v-select :value.sync="row.f_aroundmeter" :options='aroundmeters' placeholder='左右表' close-on-select
                      v-model='row.f_aroundmeter' ></v-select>
          </div>
          <div class="form-group form-input-group col-sm-4" :class="[$m.type.required ? 'select-error' : '']">
            <label for="pricetype" class="col-sm-2 control-label">气价类型</label>
            <div class="col-sm-2">
              <input type="text" v-show="false" v-model="$refs.type.selectedItems"  v-validate:type='{required: true }'>
              <v-select :value.sync="row.pricetype" v-model="row.pricetype"
                        :options='pricetypes' placeholder='气价类型'
                        close-on-select  v-ref:type>
              </v-select>
            </div>
          </div>
          <div v-if="viewsee" class="form-group form-input-group col-sm-4" :class="[$m.viewer.required ? 'select-error' : '']">
            <label for="pricetype" class="col-sm-2 control-label">显示类型</label>
            <div class="col-sm-2">
              <input type="text" v-show="false" v-model="$refs.viewer.selectedItems"  v-validate:viewer='{required: true }'>
              <v-select :value.sync="row.f_show_way" v-model="row.f_show_way"
                        :options='viewstyle' placeholder='显示类型'
                        close-on-select  v-ref:viewer>
              </v-select>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4" :class="[$m.name.required ? 'select-error' : '']">
            <label for="pricename" class="col-sm-2 control-label">气价名称</label>
            <div class="col-sm-2">
              <input type="text" v-show="false" v-model="$refs.name.selectedItems"  v-validate:name='{required: true }' >
              <v-select :value.sync="row.pricename" v-model="row.pricename"
                        :options='getPricenames(row.pricetype)' placeholder='气价名称'
                        close-on-select :disabled= 'row.pricetype.length === 0 ' v-ref:name></v-select>
            </div>
          </div>
          <span class= "col-sm-12" v-if="row.pricetype.length === 1 && gasproperties.length === 0" style="color:red;text-align:right">请确定用气性质已选择！！</span>
        </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4">
            <label for="f_remanent_gas" class="control-label">剩余气量</label>
            <div class="col-sm-3 form-input-group">
              <input type="number" class="form-control" v-model="row.f_remanent_gas" placeholder='剩余气量' :disabled="f_userinfo_id"></input>
              <button type="button" name="button" class="btn btn-link" @click="modefiy('f_remanent_gas')" v-if="f_userinfo_id">修改</button>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_install_person" class="control-label">安装人</label>
            <div class="col-sm-3">
              <v-select :value.sync="row.f_install_person" v-model="row.f_install_person"
                        :options='installperson' placeholder='安装人'
                        close-on-select></v-select>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_position" class="col-sm-1 control-label">安装位置</label>
            <v-select :value.sync="row.f_position" v-model="row.f_position"
                      :options='positions' placeholder='安装位置'
                      close-on-select>
            </v-select>
          </div>
        </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4">
            <label for="f_install_date" class="control-label">安装日期</label>
            <div class="col-sm-3">

              <datepicker id="startDate" placeholder="安装日期" width='100%'
                          v-model="row.f_install_date"
                          :value.sync="row.f_install_date"
                          :format="'yyyy-MM-dd'"
                          :show-reset-button="true">
              </datepicker>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_gas_person" class="control-label">通气人</label>
            <div class="col-sm-3">
              <input type="text" class="form-control" v-model="row.f_gas_person" placeholder='通气人'></input>
              <!-- <v-select :value.sync="row.f_gas_person" v-model="row.f_gas_person"
                  :options='gasperson' placeholder='通气人'
                  close-on-select></v-select> -->
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_gas_date" class="control-label">通气日期</label>
            <div class="col-sm-3">
              <datepicker  placeholder="通气日期"
                           v-model="row.f_gas_date"
                           :value.sync="row.f_gas_date"
                           :format="'yyyy-MM-dd'"
              ></datepicker>
            </div>
          </div>
        </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4" style="align-items: center;">
            <label for="f_fire_state1" class="control-label">点火状态</label>
            <input type="checkbox" v-model="row.f_fire_state1" style="flex: inherit;width:18px;height:18px">
            <!-- <label class="radio-inline">
               <strong>点火状态</strong><input type="checkbox" value="1" v-model="row.f_fire_state1">
            </label> -->
            <!-- <v-select :value.sync="row.f_fire_state1" v-model="row.f_fire_state1"
                :options='fireState' placeholder='点火状态'
                close-on-select>
              </v-select> -->
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_inputtor" class="control-label">抄表员</label>
            <div class="col-sm-3">
              <v-select :value.sync="row.f_inputtor" v-model="row.f_inputtor"
                        :options='inputtores' placeholder='抄表员'
                        close-on-select></v-select>
            </div>
          </div>
        </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4">
            <div class="col-sm-4">
            </div>
            <div class="col-sm-8">
              <button type="button" name="button" class="btn btn-deafult btn-block" @click="$dispatch('delete-meter')" v-if="!row.f_table_state">
                <span class="glyphicon glyphicon-trash"></span>
              </button>
            </div>
          </div>
        </div>
      </form>
    </validator>
    <idverify :show.sync="show" @change-con="changeVal"></idverify>
  </div>
</template>

<script>
  import AppData from '../../stores/AppData'
  import * as Util from '../Util'
  import co from 'co'

  let brandChangeGen = function * (self, val) {
    console.log('看看旧表的表号', self.meter.f_meternumber, self.meter.f_meter_classify)
    let beforeRecord = null
    if (self.meter.f_meter_classify === '机表') {
      beforeRecord = yield self.$resetpost('rs/sql/singleTable', {data: {tablename: 't_handplan', condition: `f_meternumber = '${self.meter.f_meternumber}'`}}, {resolveMsg: null, rejectMsg: '在档案中更改气表品牌时，获取之前机表抄表信息出错！！'})
    } else {
      beforeRecord = yield self.$resetpost('rs/sql/singleTable', {data: {tablename: 't_sellinggas', condition: `f_meternumber = '${self.meter.f_meternumber}'`}}, {resolveMsg: null, rejectMsg: '在档案中更改气表品牌时，获取之前卡表收费信息出错！！'})
    }
    if (beforeRecord.data.length > 0) {
      console.log('还原气表品牌', self.meter)
      self.$showAlert('该气表已投入使用，如需更改请执行换表操作', 'warning', 3000)
      self.row.gasbrand = self.meter.gasbrand
    } else {
      console.log('我选择了', self.row)
      self.row.f_whether_hairpin = self.row.gasbrand[0].f_meter_type === '机表' ? '无卡' : '未发'
    }
    console.log('111', self.row)
  }
  export default {
    title: '表具信息',
    data () {
      return {
        viewsee: false,
        row: this.meter,
        show: false,
        isdecimal: '否',
        field: ''
      }
    },
    props: ['meter', 'usertype', 'isdecimal', 'gasproperties', 'valid', 'f_userinfo_id'],
    ready () {
      console.log('看看meter里面的数据', this.meter, this.row)
      this.row = Object.assign(this.row, this.meter, {})
      this.isdecimal = this.row.gasbrand.length > 0 ? this.row.gasbrand.f_isdecimal : '否'
      this.row.valid = false
      this.row.f_aroundmeter[0] = '左表'
      console.log(Util.toStandardTimeString())
    },
    methods: {
      tablebaseChange () {
        if (this.isdecimal === '是') {
          this.$set('row.f_meter_base', (this.row.f_meter_base - 0).toFixed(2))
          // this.row.f_meter_base = (this.row.f_meter_base - 0).toFixed(2)
        } else {
          this.$set('row.f_meter_base', (this.row.f_meter_base - 0).toFixed(0))
          // this.row.f_meter_base = (this.row.f_meter_base - 0).toFixed(0)
        }
      },
      brandChange (val) {
        console.log('气表品牌改变,,', val)
        this.isdecimal = val.length > 0 ? val[0].f_isdecimal : '否'
        this.tablebaseChange()
        if (this.row.f_user_id) {
          co(brandChangeGen(this))
        }
        if (val[0].f_meter_type === '物联网表') {
          this.viewsee = true
        } else {
          this.viewsee = false
        }
      },
      getPricenames (pricetype) {
        console.log('气价。。。。。获取', this.usertype, this.gasproperties, pricetype)
        let rs = []
        let filter = null
        if (Util.f.parent.orgtype !== '总公司') {
          filter = Util.f.f_fengongsi
        }
        if (this.usertype.length === 1 && this.gasproperties.length === 1 && pricetype.length === 1) {
          let params = {
            f_user_type: this.usertype[0],
            f_gasproperties: this.gasproperties[0],
            f_price_type: pricetype[0],
            filter: filter
          }
          console.log('获取气价的参数。。。。', params)
          rs = AppData.getPrice(params)
        }
        if (rs.length === 0) {
          this.model.f_price_name = ''
        }
        return rs
      },
      mValid (bool) {
        this.row.valid = bool
        this.$dispatch('self-valid')
      },
      // 带权限修改单值返回修改后得值和修改原因
      modefiy (field) {
        this.show = true
        this.field = field
      },
      changeVal (val, reason) {
        this.$set(`row.${this.field}_befor`, this.row[this.field])
        this.$set(`row.${this.field}`, this.isdecimal === '是' ? (val - 0).toFixed(2) : (val - 0).toFixed(0))
        this.$set(`row.${this.field}_reason`, reason)
        console.log('111111111111111111111', this.row)
      }
    },
    watch: {
      'meter' () {
        this.row = Object.assign(this.row, this.meter, {})
        this.isdecimal = this.row.gasbrand.f_isdecimal
        this.row.valid = false
        this.showtype = this.row.gasbrand.f_meter_type
      }
    },
    computed: {
      usertypes () {
        return AppData.getParam('用户类型')
      },
      viewstyle () {
        return AppData.getParam('显示类型')
      },
      pricetypes () {
        return AppData.getParam('气价类型')
      },
      positions () {
        return AppData.getParam('安装位置')
      },
      inputtores () {
        // 资源服务中取用这个
        // let rs = []
        // if (Util.f.f_gasman.length > 0) {
        //   for (let i = 0; i < Util.f.f_gasman.length; i++) {
        //     let temp = {
        //       label: Util.f.f_gasman[i].name,
        //       value: Util.f.f_gasman[i].name
        //     }
        //     rs.push(temp)
        //   }
        // }
        // return rs
        // 参数中取取用这个
        return AppData.getParam('抄表员')
      },
      installperson () {
        // 资源服务中取用这个
        // let rs = []
        // if (Util.f.f_installman.length > 0) {
        //   for (let i = 0; i < Util.f.f_installman.length; i++) {
        //     let temp = {
        //       label: Util.f.f_installman[i].name,
        //       value: Util.f.f_installman[i].name
        //     }
        //     rs.push(temp)
        //   }
        // }
        // return rs
        // 参数中取取用这个
        return AppData.getParam('安装人')
      },
      // installperson () {
      //   return AppData.getParam('安装人')
      // },
      gasperson () {
        return AppData.getParam('通气人')
      },
      changetubeperson () {
        return AppData.getParam('改管人')
      },
      meterbrands () {
        return AppData.getGasbrand()
      },
      aroundmeters () {
        return AppData.getParam('左右表')
      }
    }
  }
</script>
